<template>
	
	<el-drawer 
	title="我是标题" 
	size="70%" 
	:with-header="false" 
	:wrapperClosable="false" 
	:visible.sync="drawer" 
	direction="rtl" 
	@close="click" 
	:show="show"
	:show-close="true"
	
	class="drawer-main">
		<div class="close" @click="drawer = false">
			<i class="el-icon-close"></i>
		</div>
		<div class="client-box" v-if="JSON.stringify(clientData)!='{}'">
			<div class="client-header">
				<div class="client-img"></div>
				<div class="client-info">
					<div class="client-title">{{clientData.client.clent_name}}</div>
					<div class="client-content">
						<el-row>
							<el-col :span="8"><span>所属销售:</span>{{clientData.xuser}}</el-col>
							<el-col :span="8"><span>客户类型:</span>{{clientData.cate_name}}</el-col>
							<el-col :span="8"><span>最后跟进时间:</span>{{clientData.lsenlist[0].creat_time}}</el-col>
						</el-row>
						<el-row>
							<el-col :span="24"><span>最后跟进信息:</span>{{clientData.lsenlist[0].content}}</el-col>
							
						</el-row>
					</div>
					
				</div>
			</div>
		    <div class="client-tab">
				<el-tabs v-model="actvieTab" >
				    <el-tab-pane label="跟进记录" name="first">
						<span class="foll">跟进记录</span>
						<span class="totals">共17条记录</span>
					</el-tab-pane>
				    <el-tab-pane label="预约回访" name="second">
						<span class="foll">预约回访</span>
						<span class="totals">共17条记录</span>
					</el-tab-pane>
				    <el-tab-pane label="客户详情" name="third">
						<span class="foll">客户详情</span>
						
					</el-tab-pane>
				    <el-tab-pane label="订单记录" name="fourth">
						<span class="foll">订单记录</span>
						<span class="totals">共17条记录</span>
					</el-tab-pane>
				  </el-tabs>
			</div>
			
			<div class="client-list" v-if="actvieTab=='first'">
				<div class="client-tabs-list">
					<el-scrollbar style="height:100%;">
						<div class="client-main">fdafdsa</div>
					</el-scrollbar>
				</div>
				<div class="client-footer">
					
				</div>
			</div>
			
			<div class="client-list" v-if="actvieTab=='second'">
				<div class="client-tabs-list">
					<el-scrollbar style="height:100%;">
						<div class="client-main">fdafdsa</div>
					</el-scrollbar>
				</div>
				<div class="client-footer">
					
				</div>
			</div>
			
			
			<div class="client-list" v-if="actvieTab=='third'">
				<div class="client-tabs-list">
					<el-scrollbar style="height:100%;">
						<div class="client-main">
							<el-row :gutter="20">
								<el-col :span="12">
									<div class="c-t-i">
										<label>客户名称:</label>
										<span>{{clientData.client.clent_name}}</span>
									</div>
									<div class="c-t-i">
										<label>客户类型:</label>
										<span>{{clientData.cate_name}}</span>
									</div>
									<div class="c-t-i">
										<label>获取客户时间:</label>
										<span>{{clientData.client.get_time}}</span>
									</div>
									<div class="c-t-i">
										<label>公司地址:</label>
										<span>{{clientData.client.address}}</span>
									</div>
									
								</el-col>
								<el-col :span="12">
									<div class="c-t-i">
										<label>所属销售:</label>
										<span>{{clientData.xuser}}</span>
									</div>
									<div class="c-t-i">
										<label>最后跟进人:</label>
										<span>{{clientData.user.nick_name}}</span>
									</div>
									<div class="c-t-i">
										<label>最后跟进时间:</label>
										<span>{{clientData.creat_time}}</span>
									</div>
								</el-col>
							</el-row>
						</div>
					</el-scrollbar>
				</div>
				
			</div>
			
		</div>
	
		
	</el-drawer>
</template>

<script>
	let _self;
	export default {
		name: 'select-client',
		data() {
			return {
				drawer: false,
				actvieTab:'first'
			}
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			clientData:{
				 type: Object,
				 default:()=> {}
			},
			
		},
		watch: {
			show() {
				this.drawer = this.show;
			}
		},
		created() {
			_self = this;
			//_self.init();
		},
		methods: {
			click() {
				this.$emit('update', this.show)
				
			},
		}
	}
</script>

<style lang="scss">
	.drawer-main{
		.close {
		  width: 40px;
		      height: 60px;
		      position: absolute;
		      left: -40px;
		      top: 46%;
		      background-color: #FFFFFF;
		      cursor: pointer;
		      padding: 15px 5px;
		      border-bottom-left-radius: 8px;
		      border-top-left-radius: 8px;
			   i {
			      font-size: 30px;
			      color: #777;
			  }
		}
		.el-drawer{
		    outline: none;
			overflow: visible;
			/deep/ .el-drawer__container{
				 outline: none;
			}
		}
	}
	
	.drawer-main .el-drawer__open .el-drawer.rtl {
	    outline: none;
	}
	.client-box{
		width: 100%;
		height: 100%;
	}
	.client-header{
		height: 100px;
		width: 100%;
		padding: 30px;
		display: flex;
		.client-img{
			width: 90px;
			height: 90px;
			background-color: #f1f1f1;
			margin-right: 10px;
		}
		.client-info{
			flex: 1;
			.client-title{
				padding: 5px 0 18px;
				font-size: 20px;
				    height: 20px;
				    color: #303033;
				    font-weight: 600;
				   
			}
		}
	}
	.client-content{
		.el-col{
			padding: 5px;
			font-size: 12px;
			span{
				color: #777;
				margin-right: 10px;
			}
		}
	}
	.client-tab{
		 
		// margin: 0px 20px;
		.el-tabs{
			// margin: 0px 20px;
			.el-tabs__header{
				background: rgb(236, 245, 255);
				margin: 0;
				.el-tabs__nav-wrap{
					margin: 0px 20px;
				}
				.el-tabs__nav-wrap::after{
					background-color: rgb(217, 236, 255);
				}
				.el-tabs__item{
					font-size: 12px;
					
				}
				.el-tabs__item:focus.is-active.is-focus:not(:active){
					outline: none;
					box-shadow: 0 0 0;
					border-radius: 0;
				}
			}
			.el-tabs__content{
				// margin: 0px 20px;
				height: 40px;
				border-bottom: #f1f1f1 solid 1px;
				line-height: 40px;
				.foll{
					font-size: 12px;
					font-weight: 600;
					margin-left: 20px;
				}
				.totals{
					font-size: 12px;
					color: #777;
					float: right;
					margin-right: 20px;
				}
			}
		}
	}
	.client-list{
		height: calc(100% - 241px);
		// background: #000;
		width: 100%;
		.client-tabs-list{
			height: calc(100% - 41px);
			width: 100%;
			.client-main{
				margin: 10px;
			}
		}
		.client-footer{
			position: fixed;
			bottom: 0;
			height: 40px;
			border-top: #f1f1f1 solid 1px;
			width: 100%;
		}
	}
	.c-t-i{
		border-bottom: #f1f1f1 solid 1px;
		line-height: 40px;
		font-size: 12px;
		label{
			margin-right: 10px;
			color: #777;
		}
	}
</style>
